{% extends 'kingadmin/table_index.html' %}
{% load tags %}

{% block extra-css-resources %}
    <style type="text/css">
        .filter_select_box {
            height: 250px !important;
            width: 100%;
            border-radius: 3px;
        }
    </style>
{% endblock %}
{% block container %}
    {#    {{ form_obj }}#}

    <form class="form-horizontal" role="form" method="post" onsubmit="return SelectAllChoseDate()">{% csrf_token %}
        {{ form_obj.errors }}
        {% for field in form_obj %}
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label" style="font-weight: normal">
                    {% if field.field.required %}
                        <b>{{ field.label }}</b>
                    {% else %}
                        {{ field.label }}
                    {% endif %}
                </label>
                <div class="col-sm-4">
                    {#              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">#}
                    {% if field.name in admin_class.filter_horizontal %}
                        <div class="col-md-5">
                            {% get_m2m_obj_list admin_class field form_obj as m2m_obj_list %}
                            <select id="id_{{ field.name }}_from" multiple class="filter_select_box">
                                {% if field.name in admin_class.readonly_fields and not admin_class.is_add_form  %}
{#                                  {% for models.Customer.tags.rel.to.objects.all() %}#}
                                    {% for obj in m2m_obj_list %}
                                    <option  value="{{ obj.id }}" disabled>{{ obj }}</option>
                                    {% endfor %}
                                {% else %}
                                    {% for obj in m2m_obj_list %}
                                    <option ondblclick="MoveElementTo(this,'id_{{ field.name }}_to', 'id_{{ field.name }}_from')" value="{{ obj.id }}">{{ obj }}</option>
                                    {% endfor %}
                                {% endif %}
                            </select>
                        </div>
                        <div class="col-md-1">
                            箭头
                        </div>
                        <div class="col-md-5">
                        {% get_m2m_selected_obj_list form_obj field as selected_obj_list %}
                            <select tag="chosen_list" id="id_{{ field.name }}_to" name="{{ field.name }}" multiple class="filter_select_box">
                                {% if field.name in admin_class.readonly_fields  and not admin_class.is_add_form %}
{#                                 {% for model.Customer.objects.last().tags.all() %}#}
                                    {% for obj in selected_obj_list %}
                                    <option  value="{{ obj.id }}" disabled>{{ obj }}</option>
                                    {% endfor %}
                                {% else %}
                                    {% for obj in selected_obj_list %}
                                    <option ondblclick="MoveElementTo(this,'id_{{ field.name }}_from', 'id_{{ field.name }}_to')" value="{{ obj.id }}">{{ obj }}</option>
                                    {% endfor %}
                                {% endif %}
                            </select>
                        </div>
                        <span style="color: red">{{ field.errors.as_text }}</span>
                    {% else %}
                        {{ field }}
{#                        {% block update_password %}#}
                        <span style="color: #999999">{{ field.help_text }}</span>
{#                        {% endblock %}#}
                        <span style="color: red">{{ field.errors.as_text }}</span>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
{#        {% if not admin_class.readonly_table %}#}
        <div class="form-group">
            <div class="col-sm-6 " style="margin-left: 80px;margin-top: 50px;background-color: #f8f8f8;border: 1px #eeeeee;border-radius: 4px;height: 50px;padding: 8px 14px">
{#                <button type="button" class="btn btn-danger pull-left" >#}
                    {% block delete %}
                    <a href="{% url 'obj_delete' app_name table_name form_obj.instance.id %}" class="btn btn-danger pull-left">Delete</a>
                    {% endblock %}
{#                </button>#}
                <button type="submit" class="btn btn-success pull-right">Save</button>
            </div>
{#        {% endif %}#}
        </div>
    </form>
<script>
    function MoveElementTo(ele,target_id,new_target_id) {
        var opt_ele = "<option value='" + $(ele).val() +"'ondblclick=MoveElementTo(this,'" + new_target_id + "','"+ target_id +"')>" + $(ele).text() + "</option>";
        $("#" + target_id).append(opt_ele);
        $(ele).remove();
        //$(ele).appendTo("#" + target_id)
    }
    function SelectAllChoseDate() {
        $("select[tag='chosen_list'] option").each(function () {
            $(this).prop("selected", true)
        });

        //remove all disabled attrs
        $("form").find("[disabled]").removeAttr("disabled");
        return true;
    }
</script>
{% endblock %}